<template>
  <view class="living-item-vertical">
    <view class="living-video-poster" @click="toLivingRoom">
      <view class="video-poster">
        <image v-if="!showVideoReal" src="/static/images/zb/image-mask.png" class="image-mask" />
        <image class="poster-img" :style="{'opacity': (showVideoReal && showPlayer) ? 0 : 1}" :src="itemData.coverImg" mode="aspectFill" />
      </view>
      <view v-if="!showVideoReal" class="living-video-info">
        <view class="living-video-status">
          <view v-if="itemData.liveStatus === 3" class="living-video-icon-left">
            <b-image is-asset src="/static/images/zb/icon_live.gif" class="tip-icon" mode="aspectFill" />
            <view class="status-video-icon">直播中</view>
          </view>
          <view v-else-if="itemData.liveStatus === 2" class="living-video-icon-left preview">
            <b-image is-asset src="/static/images/zb/icon_live.gif" class="tip-icon" mode="aspectFill" />
            <view class="status-video-icon">待开播</view>
          </view>
          <view v-else-if="itemData.liveStatus === 5 && fromType !== 'history'" class="living-video-icon-left review">
            <b-image is-asset src="/static/images/zb/icon_history.png" class="tip-icon" mode="aspectFill" />
            <view class="status-video-icon">回看</view>
          </view>
          <view v-else-if="itemData.liveStatus === 5 && fromType == 'history'" class="living-video-icon-left gray">
            <b-image is-asset src="/static/images/zb/icon_history.png" class="tip-icon" mode="aspectFill" />
            <view class="status-video-icon">已下线</view>
          </view>
          <view v-if="itemData.liveStatus !== 2" class="living-video-icon-right">
            <!-- <image src="/static/images/zb/hot_living_icon.png" class="tip-icon" mode="aspectFill" /> -->
            <view class="tip-text">人气{{ (itemData.liveStatus === 2 ? itemData.subscribeCnt : itemData.viewsNum) | formatNumber(2, true) }}</view>
          <!-- <text v-else-if="itemData.liveStatus === 2 " class="tip-text">{{ itemData.beginTime | formatDate('yyyy/MM/dd HH:mm') }} 开播 | 已有{{ itemData.subscribeCnt || 0 }}人预约</text> -->
          </view>
        </view>
        <view v-if="itemData.liveStatus === 3" class="living-video-play">
          <image width="88" height="88" src="/static/images/zb/icon_video_play.png" class="play-icon" mode="aspectFill" />
        </view>

        <view class="living-video-master">
          <view v-if="itemData.liveStatus === 2" class="living-video-time">
            <image src="/static/images/zb/icon_time.png" class="time-icon" mode="aspectFill" />
            {{ itemData.beginTime | parseTime('{y}.{m}.{d} {h}:{i}') }}
          </view>
          <view v-if="itemData.liveStatus === 5" class="living-video-time">
            <image src="/static/images/zb/icon_time.png" class="time-icon" mode="aspectFill" />
            {{ itemData.realEndTime | parseTime('{y}.{m}.{d} {h}:{i}') }}
          </view>
          <!-- #ifdef MP-WEIXIN -->
          <view v-if="itemData.liveStatus === 2 && itemData.subscribe === 0" class="living-video-btn preview relative-container" @click.stop.prevent="toHandleSub">
            预约
            <b-open-type open-type-sub="getUserInfoNoLogin" />
          </view>
          <view v-else-if="itemData.liveStatus === 2 && itemData.subscribe === 1" class="living-video-btn history-gray">已预约</view>
        <!-- #endif -->
        <!-- <view v-else-if="itemData.liveStatus === 5 && fromType !== 'history'" class="living-video-btn">{{ itemData.realEndTime | formatDate('MM月dd日') }}</view>
        <view v-else-if="itemData.liveStatus === 5 && fromType == 'history'" class="living-video-btn history-gray">观看回放</view> -->
        </view>
        <zan-animate v-if="itemData.liveStatus === 3"></zan-animate>
      </view>
    </view>
    <view class="living-item-container">
      <view class="living-video-title">{{ itemData.liveTitle ? itemData.liveTitle : '' }}</view>
      <view class="living-item-bottom">
        <view class="living-video-author" @click.stop.prevent="goAnchorIndex">
          <image v-if="itemData.headimgurl" :src="itemData.headimgurl" class="avatar" mode="aspectFill" />
          <image v-else src="/static/images/mine/touxiang.png" class="avatar" />
          <view class="name-box">
            <view class="name">{{ itemData.anchorName ? itemData.anchorName : '' }}</view>
            <view class="fans">{{ itemData.followNum | formatNumber(2, true) }}粉丝</view>
          </view>
        </view>
        <view v-if="itemData.liveGoodsDetailVOS && itemData.liveGoodsDetailVOS.length" class="commodity-box" @click="toCommodityList">
          <view v-for="(item, index) in itemData.liveGoodsDetailVOS" :key="index" class="commodity-item">
            <image v-if="item" :src="item.pic" class="commodity" mode="aspectFill" />
            <view v-if="itemData.liveGoodsCnt > 2 && index === 2" class="cover-commodity">
              <view>{{ itemData.liveGoodsCnt > 20 ? '20+' : itemData.liveGoodsCnt }}</view>
              <view>宝贝</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import zanAnimate from './animate-item'
export default {
  components: {
    zanAnimate
  },
  props: {
    itemData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    fromType: {
      type: String,
      default: ''
    },
    showVideo: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showPlayer: false,
      showVideoReal: false
    }
  },
  methods: {
    toLivingRoom() {
      this.$emit('toLivingRoom', { ...this.itemData })
      // this.$navigateTo(`/pagesDetail/living-list/living-commodity?roundId=${this.itemData.id}`, {})
    },
    toHandleSub() {
      this.$emit('toHandleSub', { ...this.itemData })
    },
    goAnchorIndex() {
      this.$emit('toAnchorIndex', { ...this.itemData })
    },
    toCommodityList() {
      if (this.itemData.liveStatus !== 2) {
        return
      }
      // this.$navigateTo(`/pagesDetail/living-list/living-commodity?roundId=${this.itemData.id}`, {})
      // this.$emit('toCommodityList', { ...this.itemData })
    }
  }
}
</script>
<style scoped lang="scss">
.living-item-vertical
{
  width:720rpx;
  height:436rpx;
  @include flex;
  position: relative;
  .living-video-poster {
    position: relative;
    flex: 0 0 360rpx;
    width:360rpx;
    height:436rpx;
    .video-poster {
      position: relative;
      width:360rpx;
      height:436rpx;
      .image-mask{
        position: absolute;
        z-index: 4;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
      .poster-img{
        z-index: 3;
        width:360rpx;
        height:436rpx;
        position: absolute;
        left: 0;
        top: 0;
        transition: 1s;
      }
    }

  }
  .living-video-info {
    position: absolute;
    z-index: 4;
    left: 0;
    top: 0;
    width:100%;
    height:100%;
    @include flex(column-reverse);
    @include j-between;
    flex: 1;
    .living-video-play{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      .play-icon{
        width: 88rpx;
        height: 88rpx;
      }
    }
    .living-video-status{
      left: 24rpx;
      top: 24rpx;
      position: absolute;
      display: flex;
      color: white;
      text-align: center;
      .living-video-icon-left{
        @include flex();
        @include a-center;
        @include j-center;
        // justify-content: flex-end;
        width:110rpx;
        height:40rpx;
        border-radius:100rpx 0px 0px 100rpx;
        background:linear-gradient(270deg,rgba(255,0,48,1) 0%,rgba(255,65,101,1) 100%);
        &.preview {
          border-radius: 100rpx;
          background:linear-gradient(270deg,rgba(35,137,16,1) 0%,rgba(68,180,48,1) 100%);
        }
        &.review {
          background:linear-gradient(270deg,rgba(24,94,178,1) 0%,rgba(62,177,224,1) 100%);
          .tip-icon{
            width: 12rpx;
            height: 12rpx;
          }
        }
        &.gray {
          background:linear-gradient(270deg,#ccc 0%,#ccc 100%);

        }
        .status-video-icon {
          min-width: 80rpx;
          display: block;
          font-size: 24rpx;
          line-height: 24rpx;
          transform: scale(0.75) translateX(10%) translateY(-10%);
          margin-left: -10rpx;
          margin-right: -10rpx;
        }
      }
      .living-video-icon-right{
        width:110rpx;
        height:40rpx;
        background:rgba(0,0,0,0.7);
        border-radius:0px 100rpx 100rpx 0px;
        box-sizing: border-box;
        @include flex;
        // @include a-center;
        // @include j-center;
        .tip-text {
          white-space: nowrap;
          text-align: left;
          width: 120rpx;
          transform: scale(0.75) translateX(0%);
          color: white;
          font-size: 24rpx;
          line-height: 36rpx;
          display: block;
        }
      }
      .tip-icon {
        width: 26rpx;
        height: 26rpx;
      }
    }
  }
  .living-video-tip {
    @include flex;
    @include a-center;
  }
  .living-video-btn {
    position: absolute;
    width:152rpx;
    height:56rpx;
    left: 24rpx;
    bottom: 46rpx;
    background:rgba(255,117,159,1);
    text-align: center;
    line-height: 56rpx;
    color: #fff;
    border-radius: 4rpx;
    font-size: 28rpx;
    box-sizing: border-box;
    &.preview {
      background:linear-gradient(270deg,rgba(35,137,16,1) 0%,rgba(68,180,48,1) 100%);
    }
    &.history-gray {

       background-color: transparent;
       border: 2rpx solid #eee;
    }
  }
}
.living-video-master {
  @include flex(column);
  @include j-between;
  // @include a-center;
  margin-bottom: 16rpx;
  margin-left: 24rpx;
  .living-video-time{
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: white;
    .time-icon{
      width: 24rpx;
      height: 24rpx;
      margin-right: 10rpx;
    }
  }
}
.living-item-container{
  padding: 16rpx;
  box-sizing: border-box;
  @include flex(column);
  @include j-between;
  .living-video-title {
      color: $color-title;
      font-size: 32rpx;
      line-height: 45rpx;
      margin-bottom: 18rpx;
      font-weight: bold;
      @include text-ellipsis-line(3);
    }
  .living-video-author{
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
    .avatar {
      width: 64rpx;
      height: 64rpx;
      border-radius: 32rpx;
      margin-right: 10rpx;
      border: 2rpx solid white;
    }
    .name-box{
      .name {
        font-size:24rpx;
        line-height: 32rpx;
        color: $color-title;
        @include text-ellipsis;
        max-width: 240rpx;
      }
      .fans{
        font-size:24rpx;
        line-height: 32rpx;
        transform: scale(0.8) translateX(-10%);
        color: #999;
        @include text-ellipsis;
      }
    }
  }
  .commodity-box{
    display: flex;
    .commodity-item{
      position: relative;
      flex: 1;
      margin-right: 16rpx;
      .cover-commodity{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        @include flex(column);
        @include j-center;
        @include a-center;
        color: white;
        border-radius: 10rpx;
      }
      .commodity{
        display: block;
        width: 98rpx;
        height: 98rpx;
        border-radius: 10rpx;
      }
      &:nth-last-child(1){
        margin-right: 0;
      }
    }
  }
}

</style>
